<template>
  <div class="border">
    <h1>
      A 结点 --theme.color: {{ theme.color }} | dataColor: {{ dataColor }}
    </h1>
    <button @click="() => changeColor()">改变color</button>&nbsp;
    <button @click="() => changeMyDataColor('pink')">改变DataColor</button>
    <div style="display: flex">
      <ChildrenB style="flex: 1" />

      <ChildrenC style="flex: 1" />

      <ChildrenD style="flex: 1" />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import ChildrenB from './child_b.vue'
import ChildrenC from '../childs_C'
import ChildrenD from '../childs_D'
export default {
  name: 'indexOne',
  components: {
    ChildrenB,
    ChildrenC,
    ChildrenD
  },
  provide() {
    // 使用了Vue.observable

    this.theme = Vue.observable({
      color: 'blue',
      dataColor: this.dataColor // 注入本组件的data中的试试
    })
    return {
      theme: this.theme,
      changeColor: this.changeColor,
      changeMyDataColor: this.changeMyDataColor
    }
  },
  data() {
    return {
      dataColor: 'orange'
    }
  },
  methods: {
    changeColor(color) {
      if (color) {
        this.theme.color = color
      } else {
        this.theme.color = this.theme.color === 'blue' ? 'red' : 'blue'
      }
    },
    changeMyDataColor(myDataColor) {
      this.dataColor = myDataColor ?? ''
      this.theme.dataColor = myDataColor ?? ''
    },
    someMethod(c) {
      console.log('这是注入的方法', c)
    }
  }
}
</script>
